<template>
	<div class="nav-list">
		<lang></lang>
		<curr-app></curr-app>
		<list-title :data="header"></list-title>
		<el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-top: 10px"></el-input>
		<div class="tree-title">
			<span>导航名称</span>
			<span class="content">
				<span style="width: 50px">ID</span>
				<span>显示状态</span>
				<span style="width: 150px">操作</span>
			</span>
		</div>
		<el-tree
		:data="navList"
		node-key="navid"
		:default-expand-all="true"
		:expand-on-click-node="false"
		:filter-node-method="filterNode"
		v-loading="loading"
		element-loading-text="拼命加载中"
	    element-loading-spinner="el-icon-loading"
	    element-loading-background="rgba(255, 255, 255, 0.92)"
	    @node-drop="handleDrop"
	    draggable
		:allow-drop="allowDrop"
		ref="tree">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span>{{ node.label.name }}</span>
				<span class="content">
					<span style="width: 50px">
						{{ data.navid }}
					</span>
					<span>
						<el-switch v-model="data.display" @change="changeDisplay(node.key, data)"></el-switch>
					</span>
					<span style="width: 150px">
						<el-button type='text' size="mini" @click="handleEdit(node, data)" v-if="auth.editor">编辑</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[node.key]" v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(node.key, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(node.key, data)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[node.key]'>
								删除 <span class="el-icon-loading" v-if='submitLock[node.key]'></span>
							</el-button>
						</el-popover>
					</span>
				</span>
			</span>
		</el-tree>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import {changeToBool, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'
import Lang from "pc/common/Lang"
import CurrApp from "pc/common/CurrApp"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*当前语言*/
			currlang: '',
			/*头部数据*/
			header: {
				title: '导航列表',
				reload: true,
				buttons: [
					{
						title: '添加导航',
						type: 'primary',
						pathName: 'pc/cms/instance/nav/Nav',
						auth: false,
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			auth: {
				editor: false,//编辑
				delete: false,//删除
				sort: false,//排序
			},
			loading: true,
			filterText: '',//搜索关键词
			/*列表数据*/
			navList: [],
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
		};
	},
	components: {
		ListTitle,
		Lang,
		CurrApp
	},
	created: function() {
		/*获取当前语言*/
		let lang = this.$localstorage.get('lang');
		this.currlang = lang?lang:'zh'
		/*获取列表数据*/
		this.getNavList()
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('addNav', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyNav', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('deleteNav', this.allMenuList) == undefined)?false:true
		this.auth.sort = (judgeAuth('menuSort', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*搜索关键词*/
		filterText(val) {
			this.$refs.tree.filter(val);
		},
	},
	methods: {
		/*取出列表数据*/
		getNavList: function(){
			if(this.$api.navList != undefined){			
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.navList, {
					appid: this.appid,
					type: 'ele',
					lang: this.currlang
				}).then(res => {
					// console.log(res.data.data.list);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.navList = []
							this.navList = res.data.data
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				}) 
			}
		},
		/*编辑导航*/
    	handleEdit(index, row) {
			// console.log(row.id);
			this.$router.push(
				{
					name: 'pc/cms/instance/nav/Nav', 
					query: {
						appid: this.appid,
						id: row.navid,
					}
				}
			)
		},
		/*删除导航*/
		handleDelete(index, row) {
			// console.log(index)
			if(this.$api.deleteNav != undefined){
				if(!this.submitLock[index]){
					this.submitLock[index] = true//锁住当前的 删除按钮
					this.delTip.splice(index, 1, false)//提示消失
					/*请求后台删除*/
					this.$baseURL(this.$domain.cms)
					this.$get(this.$api.deleteNav, {
						'appid': this.appid,
						'id': row.navid
					}).then(res => {
						if(res.data.code == 0){
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'success'
							});
							this.reload();
						}else{
							this.$message({
								showClose: true,
								message: res.data.info,
								type: 'error'
							});
						}
						this.submitLock = []
						this.submitLock[index] = false//释放当前的 删除按钮
					})
					.catch(err => {})
					.finally(() => {}) 
				}
			}
		},
		/*过滤节点*/
		filterNode(value, data) {
			if (!value) return true;
			return data.label.name.indexOf(value) !== -1;
		},
		/*列表中直接修改 是否显示*/
		changeDisplay(index, row){
			if(this.auth.editor && this.$api.modifyNav != undefined){
				/*请求后台*/
				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.modifyNav, {
					'appid': this.appid,
					'Nav': {
						'id': row.navid,
						'display': row.display,
						'allMod': false
					}
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		//拖拽完毕 调用排序接口
		handleDrop(draggingNode, dropNode, dropType, ev) {
			// console.log(dropNode.data)
			if(this.auth.sort && this.$api.navSort != undefined){
				this.$baseURL(this.$domain.cms)
				this.$post(this.$api.navSort, {
					'appid': this.appid,
					'sort': draggingNode.data.navid,
					'target': dropNode.data.navid,
					'location': dropType
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		//判断拖动是否满足条件
		allowDrop(draggingNode, dropNode, type) {
			if(type !== 'inner' && draggingNode.data.parentid == dropNode.data.parentid){//不能进入内部、必须是同一目录
				return true;
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
@import "../../../../../../static/css/variable.styl"
.nav-list
	.warning
		color: #8a6d3b
		background-color: #fcf8e3
		border: 1px solid #faebcc
		margin-top: 10px
		padding: 10px
		font-size: 12px
		line-height: 20px
	.tree-title
		flex: 1
		display: flex
		align-items: center
		justify-content: space-between
		padding: 10px 0
		border-bottom: 1px solid #e9ecf4
		font-size: 12px
		font-weight: bold
		color: #909399
		.content
			span
				width: 100px
				display: inline-block
				margin-right: 5px
			span:last-child
				margin-right: 0
				width: 200px
	.el-tree
		/deep/ .el-tree-node__content
			padding: 18px 0
			border-bottom: 1px solid #e9ecf4
		.custom-tree-node
			flex: 1
			display: flex
			align-items: center
			justify-content: space-between
			font-size: 12px
			.content
				span
					width: 100px
					display: inline-block
					margin-right: 5px
					// border: 1px solid red
				span:last-child
					margin-right: 0
					.el-button--small
						padding: 0
				span.icon-sort-up,span.icon-sort-down
					width: 16px
					margin-right: 0px
					color: $theme-color
</style>
</style>